<template>
    <div class="cell" @click="clickCell(leftTitle)">
      <div class="cell-left" :style="{color: leftTitleColor}">
        <i :class="leftIcon" v-show="leftIcon"></i>
        <span>{{leftTitle}}</span>
      </div>
      <div class="cell-right" :style="{color: rightTitleColor}">
        <span>{{rightTitle}}</span>
        <i class="itlike-uniE909" v-show="isShowRightArrow"></i>
      </div>
    </div>
</template>

<script>
    export default {
        name: 'MeCommonCell',
        props: {
          // 每一个cell有不同的显示与处理，参照一些第三方的UI库的写法
          leftTitle: {
            type: String,
            default: ''
          },
          leftIcon: {
            type: String,
            default: ''
          },
          rightTitle: {
            type: String,
            default: ''
          },
          leftTitleColor: {
            type: String,
            default: ''
          },
          rightTitleColor: {
            type: String,
            default: ''
          },
          isShowRightArrow: {
            type: Boolean,
            default: true
          },
          clickCell: {
            type: Function,
            default: ()=>{}
          },
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .cell
    height 44px
    background-color: #fff
    display flex
    justify-content space-between
    align-items center
    padding 0 10px
    border-bottom 1px solid #ececec
    .cell-left
      display flex
      align-items center
      i
        font-size 20px
        margin-right 10px
</style>
